<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>AJAX-get参数处理</title>
    <style>
    	#box{
    		width: 200px;
    		height: 50px;
    		font-size:30px;
    		border: 1px solid #000;
    	}
    </style>
</head>
<body>
    <h1>AJAX-get参数处理</h1>
    <hr>
    数字1 : <input type="text" id="num1">
    数字2 : <input type="text" id="num2">
    <br>
    <br>
    <button onclick="add()">加</button>

    <hr>
    <div id="box"></div>

    <script>
    	function add() {
    		var num1 = document.getElementById('num1').value;
    		var num2 = document.getElementById('num2').value;
    		var xhr = new XMLHttpRequest();
    		//事件回调
    		xhr.onreadystatechange = function(){
    			// console.log(xhr.readyState);
    			if(xhr.readyState == 4){
    				if(xhr.status == 200){
    					//获取响应文本
    					box.innerHTML = xhr.responseText;
    				}
    			}
    		}
    		//请求初始化
    		xhr.open('post','./php/3.php',true);
    		//设置post头信息
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    		//正式发送
    		xhr.send('a='+num1+'&b='+num2);
    	}
    </script>
    

</body>
</html>